import { ref, toValue } from 'vue'
import type { MaybeRefOrGetter } from 'vue'

function useOffset(el: MaybeRefOrGetter<HTMLElement | null>) {
  const offsetX = ref(0)
  const offsetY = ref(0)

  const handler = () => {
    const elem = toValue(el)
    const elemRect = elem?.getBoundingClientRect()
    const left = elemRect ? elemRect.left : 348
    const top = elemRect ? elemRect.top : 140

    offsetX.value = left
    offsetY.value = top
  }

  handler()

  return {
    offsetX,
    offsetY,
  }
}

export default useOffset
